<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script th:src="@{/webjars/jquery/3.0.0/jquery.js}"></script>
    <script th:src="@{/js/jquery.form.min.js}"></script>
    <link th:href="@{/css/ydui.css}" rel="stylesheet">
    <script th:src="@{/js/ydui.flexible.js}"></script>
    <script th:src="@{/js/jquery.cityselect.js}"></script>
    <script type="javascript">
        !function() {
            $("#city_1").citySelect({
                prov:"北京",
                nodata:"none"
            });
        }();
    </script>
</head>
<body >
<section class="g-flexview">
    <section class="g-scrollview">
        <div class="m-cell">
            <form action="/app/modify_or_add_delivery_address/" method="post" id="modify_add_form">
                <input type="hidden" name="delivery_address_id" th:value="${delivery_address == null} ? '' : ${delivery_address.id}" />
                <input type="hidden" name="user_id" th:value="${user_id}"/>
                <div class="cell-item">
                    <div class="cell-left" style="height: 1.1rem;"><font style="color: red;">*</font>所在地区：</div>
                    <div class="cell-right">
                        <div id="city_1" style="margin-right: 1rem;">
                            <select onchange="change_school();" class="prov" name="province" style="margin-right: .3rem;width: 1.5rem;height: 0.7rem;text-align-last: center;border-radius: 0.2rem;"></select>
                            <select class="city" name="city"  disabled="disabled" style="width: 2rem;height: 0.7rem;text-align-last: center;border-radius: 0.2rem;" onchange="get_school_data(2);"></select>
                        </div>
                        <pre style="display: none;">
                            <script th:inline="javascript">
                                    var prov = [[${delivery_address != null ? delivery_address.province : ''}]];
                                    var city = [[${delivery_address != null ? delivery_address.city : ''}]];
                                    if(prov && prov != '') {
                                        $("#city_1").citySelect({prov: prov, city: city});
                                    }else{
                                        $("#city_1").citySelect({required:false});
                                    }
                            </script>
                        </pre>
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left"><font style="color: red;">*</font>学校名称：</div>
                    <div class="cell-right">
                        <select id="school" name="school_name" style="width: 4rem;height: 0.7rem;text-align-last: center;border-radius: 0.2rem;margin-right: 0.9rem;">
                            <option value="">请选择</option>
                            <option th:if="${delivery_address != null and delivery_address.schoolName != null}" th:value="${delivery_address.schoolName}" th:text="${delivery_address.schoolName}" selected></option>
                        </select>
                    </div>
                </div>
                <div class="cell-item" style="height: 2rem;">
                    <div class="cell-left">详细地址：</div>
                    <div class="cell-right">
                        <textarea type="text" class="cell-textarea" name="full_address" th:text="${delivery_address == null} ? '' : ${delivery_address.fullAddress}"></textarea>
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left"><font style="color: red;">*</font>姓名：</div>
                    <div class="cell-right">
                        <input type="text" class="cell-input" name="name" th:value="${delivery_address == null} ? '' : ${delivery_address.name}"></input>
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left"><font style="color: red;">*</font>电话：</div>
                    <div class="cell-right">
                        <input type="text" class="cell-input" name="mobile" th:value="${delivery_address == null} ? '' : ${delivery_address.mobile}"></input>
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <div class="cell-left"><font style="color: red;">*</font>邮编：</div>
                    <div class="cell-right">
                        <input type="text" class="cell-input" name="post_code" th:value="${delivery_address == null} ? '' : ${delivery_address.postCode}"></input>
                    </div>
                </div>
                <div class="cell-item" style="height: 1.1rem;">
                    <span class="cell-left">设置为默认收货地址</span>
                    <label class="cell-right">
                        <input type="checkbox" class="m-switch-old" name="is_default" value="true" th:checked="${delivery_address == null} ? 'false' : ${delivery_address.isDefault}">
                        <span class="m-switch"></span>
                    </label>
                </div>
            </form>
            <div class="cell-item" style="height: 1.1rem;" th:if="${delivery_address != null}" th:onclick="delete_delivery_address([[${delivery_address.id}]]);return false;">
                <span class="cell-left"><font style="color: red;">删除收货地址</font></span>
            </div>
        </div>
        <input type="button" class="btn-block btn-danger" value="保存收货地址" onclick="submit_delivery_address();return false;"/>
    </section>
</section>
<script id="school_options" type="text/html">
    <option value="">请选择</option>
    {{each schools as school}}
        <option value="{{school.school_name}}">{{school.school_name}}</option>
    {{/each}}
</script>
<script src="http://static.ydcss.com/libs/arttemplate/template.js"></script>
<script th:src="@{/js/ydui.js}"></script>
<script th:inline="javascript">
    $(function () {
        get_school_data(1);
    });

    var change = 1;

    function change_school() {
        if (change > 1) {
            $("#school").empty();
            $("#school").append("<option value=\"\">请选择</option>\n");
        }
        change ++;
    }

    function get_school_data(time){
        var province = $("#city_1").find("select[name='province']").val();
        var city = $("#city_1").find("select[name='city']").val();
        if(province != '' && city != '') {
            var url = "/app/get_educations_info/?province=" + province + "&city=" + city;
            $.get(url, function (res) {
                var html = template('school_options', {schools: res});
                if (time != 1) {
                    $("#school").empty();
                }
                $("#school").append(html);
            });
        }else{
            change_school();
        }
    }

    function checkTel(tel){
        return /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/.test(tel);
    }

    function checkPhone(phone){
        return /^1[34578]\d{9}$/.test(phone);
    }

    function checkPostCode(post_code) {
        return /^[1-9][0-9]{5}$/.test(post_code);
    }

    function checkForm(){
        var tar_form = $("#modify_add_form");
        var province = $("#city_1").find("select[name='province']").val();
        var city = $("#city_1").find("select[name='city']").val();
        var name = tar_form.find("input[name='name']").val();
        var mobile = tar_form.find("input[name='mobile']").val();
        var post_code = tar_form.find("input[name='post_code']").val();
        var school_name = $("#school").val();
        if(name == '' || mobile == '' || post_code == '' || province == '' || city == '' || school_name == '') {
            return false;
        }
        if(!(checkPhone(mobile) || checkTel(mobile))){
            return false;
        }
        return checkPostCode(post_code);
    }

    function finishPage(op){
        window.deliveryAddress.finishActivity(op);
    }
    function submit_delivery_address() {
        if(checkForm()) {
            $("#modify_add_form").ajaxSubmit(function (res) {
                if (res == "success") {
                    finishPage("refresh");
                } else {
                    YDUI.dialog.alert('保存失败！');
                }
            });
        }else{
            YDUI.dialog.alert("请检查输入");
        }
    }
    
    function delete_delivery_address(delivery_address_id) {
        YDUI.dialog.confirm('确定删除？',  '无法恢复！',  function () {
            YDUI.dialog.loading.open('正在删除，请稍后');
            var url = "/app/delete_delivery_address/";
            var post_param = {"delivery_address_id" : delivery_address_id};
            $.post(url,post_param,function (res) {
                YDUI.dialog.loading.close();
                if(res == "invalid address"){
                    YDUI.dialog.toast('无效地址！', 'error', 1000);
                }else if(res == "success"){
                    console.log("success");
                    finishPage("refresh");
                }else{
                    YDUI.dialog.toast('删除失败！', 'error', 1000);
                }
            });
        });
    }
</script>
</body>
</html>